<template>
  <frame-view>
    <!-- 状态栏 -->
    <status-bar></status-bar>
    <!-- 标题栏 -->
      <title-bar :titleProp="this.getMyFaultTitle" :pageTypeProp="2"></title-bar>

      <scroll-view>
        <second-page-margin :deviceTypePro="this.deviceType">
          <div class="FaultHelpTop">
            <img class="img" src="../assets/img/ic_tips_top_bg.png" />
            <div class="title">{{ this.fault.title }}</div>
          </div>
          <div class="FaultHelpCardContainer">
            <div class="FaultHelpCard">
              <div class="title">{{ $t("fault.causeOfFault") }}</div>
              <div class="contentPadding">
                <div class="content">
                  {{ this.fault.reason }}
                </div>
              </div>
              <div class="devider" />
              <div class="title">{{ $t("fault.solution") }}</div>
              <div class="contentPadding">
                <div class="contentContainer" v-for="(item, key) in this.fault.solution"
                  :key="key">
                <div class="content">{{ item }}</div>
              </div>
            </div>
            <div class="devider" />
            <div class="title">{{ $t("fault.hotline") }}</div>
            <div class="contentPadding">
              <div class="content">400-1919-999</div>
            </div>
          </div>
        </div>
        <div class="devider" />
      </second-page-margin>
    </scroll-view>
  </frame-view>
</template>
<script>
import "../assets/css/tips.css";
import "../assets/css/frame.css";
import StatusBar from "./custom/frame/StatusBar.vue";
import TitleBar from "./custom/frame/TitleBar.vue";
import FrameView from "./custom/frame/FrameView.vue";
import SecondPageMargin from "./custom/frame/second/SecondPageMargin.vue";
import ScrollView from "./custom/frame/ScrollView.vue";

import {
  WIDTH_PHONE,
  PHONE_RATIO,
  WIDTH_SPREADED,
  SPREADED_RATIO,
  WIDTH_PAD_PORTRAIT,
  PAD_PORTRAIT_RATIO,
  WIDTH_PAD_LANDSCAPE,
  PAD_LANDSCAPE_RATIO,
  WIDTH_STANDARD,
  SPREADED_SCREEN_RATIO,
  selectWidth,
  flexibleWidth,
  flexibleHeight,
  screenDpr,
  screenType,
  screenDescription,
  isIOS,
  isSpreadOn,
  screenSize,
  getSecondPageMarginStyle,
  getSecondPageStyle,
  getDialogFlexAlign,
  getDialogStyle,
  getSingleButtonStyle,
  setScreenResizeListener,
  itemWidth,
} from "../assets/js/flexible.js";
import SecondPageMarginVue from "./custom/frame/second/SecondPageMargin.vue";

export default {
  name: "FaultHelpPage",
  components: { StatusBar, TitleBar, FrameView, ScrollView, SecondPageMargin },
  data() {
    return {
      fault: { title: "", reason: "", solution: [] },
      deviceType: 1,
    };
  },
  mounted() {
    this.deviceType = screenType;
    this.fault = this.$route.query.fault;
    setScreenResizeListener(this.updateScreenResize);
  },
  computed: {
    getMyFaultTitle() {
      return this.$i18n.t("fault.faultInfor");
    },
  },
  methods: {
    updateScreenResize(newScreenType) {
      this.deviceType = newScreenType;
    },
  },
};
</script>

<style scoped>
.FaultHelpTop {
  width: 100%;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.FaultHelpTop .img {
  width: 96px;
  height: 96px;
  margin-top: 48px;
  /* background: #ff0000; */
}

.FaultHelpTop .title {
  color: var(--current-third-title-color);
  font-size: 14px;
  font-weight: 400;
  margin-top: 8px;
}

.FaultHelpCardContainer {
  margin-top: 48px;
  width: 100%;
  background-color: var(--current-card-background-color);
  flex-direction: column;
  border-radius: 16px;
  display: flex;
}

.FaultHelpCard {
  width: 100%-24px;
  flex-direction: column;
  margin-left: 12px;
  margin-right: 12px;
  margin-top: 12px;
  margin-bottom: 12px;
  display: flex;
}

.FaultHelpCard .title {
  color: var(--current-primary-color);
  font-size: 16px;
}

.FaultHelpCard .contentPadding {
  margin-top: 4px;
}

.FaultHelpCard .content {
  color: var(--current-second-title-color);
  font-size: 14px;
}

.FaultHelpCard .contentContainer {
  flex-direction: column;
  display: flex;
}

.FaultHelpCard .devider {
  height: 12px;
}
</style>
